<template>
  <div></div>
  <button @click="str ++">点击新增数据</button>
  <h3>{{ str }}</h3>
  <!-- <h3>{{ obj.a }}---{{ obj.obj1.a }}</h3> -->
  <!-- <h3 v-if="obj.obj1.a">{{ obj.obj1.a }}</h3><br> -->
  <button @click="loawVal">点击按钮</button>
</template>

<script setup>
import { ref, reactive, customRef, shallowRef, markRaw } from 'vue'
// shallowRef 只能定义简单数据类型的响应式
let str = shallowRef(0)
console.log(str)
const myCustomRef = customRef((track, trigger) => {
  let value = 10;
  return {
    get() {
      track(); // 收集依赖
      return value;
    },
    set(newValue) {
      value = newValue;
      trigger(); // 触发更新
    }
  };
});
const obj = reactive({
  a: 10,
  b: 20
})
console.log(obj)
// obj.a = 20
// obj1.a = 20
// console.log(obj)
// console.log(myCustomRef)
function loawVal() {
  // console.log(myCustomRef)
  // myCustomRef.value ++
  obj.obj1 = markRaw({
    a: 10,
    b: 20
  })
  obj.obj1.a ++
  console.log(obj.obj1.a)
}
</script>

<style>

</style>